import './surplus.less'
import { Table,Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {useEffect, useState} from 'react'
import {getSurplus} from '@/services/settings/surplusRequest'
function Surplus() {
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const [activeButton, setActiveButton] = useState(1);//  按钮颜色切换

    const btnClick = (buttonIndex: any) => {
        setActiveButton(buttonIndex);
    };
    useEffect(()=>{
        render();
    },[])
    const render = async ()=>{
        const {data,code} = await getSurplus()
       if(code==0){
        setData(data)
       }
    }
    interface DataType {
        key: React.Key;
        digit: number;
        num: number;
        name: string;
        direction: string;
        people: string;
        borrower: number;
        lender: string;
        beginning:string;
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '科目编号',
            dataIndex: 'subNo',
        },
        {
            title: '科目名称',
            dataIndex: 'subName',
        },
        {
            title: '余额方向',
            dataIndex: 'balanceDirection',
        },
        {
            title: '期初余额',
            dataIndex: 'people',
            render: (_, record) => (
                <Space size="middle">
                  <input type="text" />
                </Space>
              ),
        },
        {
            title: '借方累计',
            dataIndex: 'borrower',
            render: (_, record) => (
                <Space size="middle">
                  <input type="text" />
                </Space>
              ),
        },
        {
            title: '贷方累计',
            dataIndex: 'lender',
            render: (_, record) => (
                <Space size="middle">
                  <input type="text" />
                </Space>
              ),
        },
        {
            title: '年初谫',
            dataIndex: 'pid',
        },
    ];
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: DataType) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    const [data,setData] = useState([]);
    return <div>
        <div className='public'>
            <div className='publicTit'>
                期初余额设置
                <div></div>
            </div>
            <hr />
        </div>
        
        <div className="btnBox">
                <button className={activeButton === 1 ? 'btnHover' : ''} onClick={() => btnClick(1)}>
                    资产
                </button>
                <button className={activeButton === 2 ? 'btnHover' : ''} onClick={() => btnClick(2)}>
                    负债
                </button>
                <button className={activeButton === 3 ? 'btnHover' : ''} onClick={() => btnClick(3)}>
                    权益
                </button>
                <button className={activeButton === 4 ? 'btnHover' : ''} onClick={() => btnClick(4)}>
                    成本
                </button>
                <button className={activeButton === 5 ? 'btnHover' : ''} onClick={() => btnClick(5)}>
                    损益
                </button>
            </div>
        <button className="createBtn">试算平衡</button>
        <Table className='surplusTab'
                columns={columns}
                dataSource={data}
                pagination={false}
            />
    </div>
}
export default Surplus;